/* components */
import UiInput from '@src/component/ui/UiInput/UiInput.tsx'
import QualificationManagementField from '@src/component/common/BaseSelectUser/components/Form/QualificationManagementField.tsx'
/* entity */
import Tag from '@model/entity/Tag/Tag'
import LoginUser from '@model/entity/LoginUser/LoginUser'
/* interface */
import { ElSelectOption, UserState } from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserTable/TaskAllotUserTableInterface'
import { TaskVNodeTypeEnum } from '@src/modules/task/components/TaskAllotModal/TaskAllotModalModel'
/* methods */
import TaskAllotExecutorMethods from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotExecutorMethods'
/* model */
import { TaskTagListSearchModel } from '@model/param/in/Task'
/* model */
import { 
  AllotSortedEnum, 
  AllotLabelEnum,
  AllotConflictEnum
} from '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserTable/TaskAllotUserTableModel'
import { UserWorkStateLabelEnum } from '@model/enum/LabelEnum'
import { assignWorkOrder } from '@model/enum/PropaganPageEnum'
/* util */
import { uuid, getPlanStartTime } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { t } from '@src/locales'
import { isQualification } from '@src/util/grayInfo';
/* vue */
import { VNode } from 'vue/types/vnode'
import { isOpenData, isDevelopment } from '@src/util/platform'

/* @能力 */
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/avatar.png')
import { RESOURCE_PREFIX } from '@src/util/linkSwitch';
const resourcePrefix = isDevelopment() ? '' : RESOURCE_PREFIX

/* 工单指派 标签提示数据对象 */
const TaskAllotLabelTooltipMap: { [x: string]: string } = {
  [AllotSortedEnum.Distance]: t('task.tip.taskAllotModalTip9'),
  [AllotSortedEnum.AcceptTaskByTodaySearch]: t('task.tip.taskAllotModalTip10'),
  [AllotSortedEnum.TaskDegreePercentByMonth]: t('task.tip.taskAllotModalTip11')
}

class TaskAllotExecutorRender extends TaskAllotExecutorMethods {
  /**
   * @description: 渲染系统集成引导入口
   * @return {VNode}
  */  
  public renderPropagandaPageButton(): VNode {
    return (
      <propaganda-page 
        propagandaData={ assignWorkOrder } 
      />
    )
  }
  /** 
   * @description 渲染 按团队选人
  */
  public renderTeamUserSelect() {
    const scopedSlots = {
      label: (props: any = {}) => {
        const teamUsers: LoginUser[] = props?.value || []
        const teamUser: LoginUser = teamUsers[0] || {}
        return <div>{isOpenData ? <open-data type="userName" openid={teamUser.staffId}></open-data> : teamUser.displayName }</div>
      },
      option: (props: any) => {
        return (
          <contact-user-item
            key={uuid()}
            user={props.option}
            showUserState={true}
            stateColor={this.stateColorMap}
            showTag={true}
          />
        )
      },
    }
    
    return (
      <biz-form-remote-select
        ref='TeamUserBizFormRemoteSelect'
        cleared
        value={this.selectTeamUsers}
        onInput={(value: any[]) => this.handlerTeamUsersChange(value)}
        collapsed
        placeholder={t('common.placeholder.inputSearch')}
        remoteMethod={(params: any) => this.fetchTeamUsers(params)}
        scopedSlots={scopedSlots}
        onFocus={(element: Element) => this.handlerExecutorSelectFocus(element)}
      >
      </biz-form-remote-select>
    )
  }
  
  /** 
   * @description 渲染 按部门选人
  */
  public renderDepartmentUserSelect(closable: Boolean) {
    let isUsersEmpty = this.selectDeptUsers.length <= 0
    
    return (
      <div class='task-allot-table-user'>
        <ui-input placeholder={t('common.placeholder.inputSearch')} hideIcon onClick={() => this.chooseDepartmentUsers()}>
          {
            <div>
              {
                isUsersEmpty 
                ? <span class='placeholder-text'>{t('common.placeholder.inputSearch')}</span>
                : this.renderDeptUsers(closable)
              }
            </div>
          }
        </ui-input>
      </div>
    )
  }
  
  /** 
   * @description 渲染 部门人员
  */
  public renderDeptUsers(closable: Boolean) {
    let collapse = true
    let user = this.selectDeptUsers[0] || {}
    
    const ClearDeptUsers = (event: Event) => {
      event.stopPropagation()
      
      this.executorChangedHandler(null)
      // 用户自己选择的 并且 人员列表只有当前用户时
      if (user?.selfSelected && this.tableUserPage.list?.[0].userId == user.userId) return
      if (user?.selfSelected) return
      // 更新
      this.$nextTick(() => {
        this.initialize()
      })
    }
    
    const AllSelectDeptUsers = (
      this.selectDeptUsers.map((user: LoginUser) => {
        return (
          <el-tag key={user.userId} size='mini' disable-transitions closable type='info' onClose={() => this.debouncedRemoveDepartmentUser(user)}>
            {isOpenData ? <open-data type="userName" openid={user.staffId}></open-data>  :user.displayName}
          </el-tag>
        )
      })
    )
    
    const CollapseSelectDeptUsers = (
      <div class='task-allot-table-user-dept'>
        {!closable && <span>{isOpenData ? <open-data type="userName" openid={user.staffId}></open-data>  :user.displayName}</span>}
        {closable && 
          <el-tag key={user.userId} size='mini' disable-transitions closable type='info' onClose={() => this.debouncedRemoveDepartmentUser(user)}>
            {isOpenData ? <open-data type="userName" openid={user.staffId}></open-data>  :user.displayName}
          </el-tag>
        }
        {
          this.selectDeptUsers.length > 1
          && (
            <div class='biz-team-select-tags'>
              <div class='biz-team-select-tag'>+{this.selectDeptUsers.length - 1}</div>
            </div>
          )
        }
        {closable &&
          <button type='button' class='biz-team-select-clear' onClick={(event: Event) => ClearDeptUsers(event)} key='task-allot-dept-clear'>
            <i class='iconfont icon-circle-delete'></i>
          </button>
        }
      </div>
    )
    
    return collapse ? CollapseSelectDeptUsers : AllSelectDeptUsers
  }
  
  /**
   * @description 渲染协同人
  */
  public renderSynergySelect(): VNode | null {
    if (!this.synergyUserList) return null
    
    // 是否存在协同人
    let isHaveSynergyUser = this.synergyUserList.length > 0
    // 需要显示的第一个协同人
    let user: any = this.synergyUserList?.[0] || {}
    // 是否有更多的协同人 (大于1个)
    let isMoreOne = Boolean(this.synergyUserList && this.synergyUserList.length > 1)
    // 样式类名
    let classNames: string[] = ['task-allot-sysnergy-select']
    
    return (
      <div class={classNames} onClick={() => this.chooseSynergyUser()}>
        <ui-input style={`min-height:${this.synergyUserList.length > 5 ? '60px' : '32px'};width:320px;`} hideIcon placeholder={t('common.placeholder.selectSomething', {0: t('task.synergies')})}>
          {
            isHaveSynergyUser && (
              this.synergyUserList.map(item=>{
                return (
                  <el-tag key={item?.userId} size='mini' disable-transitions closable type='info' onClose={() => this.removeSynergyUser(item)}>
                    {isOpenData ? <open-data type="userName" openid={item.staffId}></open-data>  : item.displayName}
                  </el-tag>
                  )
              })
            )
          }
        </ui-input>
      </div>
    )
  }
  
  /**
   * @description 渲染选择团队
  */
  public renderTeamSelect() {    
    return (
      <biz-team-select
        placeholder={t('common.placeholder.inputSearch')}
        value={this.selectTeams} 
        fetchFunc={(params: TaskTagListSearchModel) => this.fetchTagList(params)} 
        onInput={(value: Tag[]) => this.handlerTeamChange(value)} 
        multiple 
        collapse 
      />
    )
  }
  
  /**
   * @description 渲染工单派单转派原因
   */

  public head(src:string):String{
    if (!src) return defaultAvatar
    return src
  }
  public renderTaskAllotReason(): VNode | null {
    const scopedSlots ={
      item: (props: any) => {
        return (
          <div>
            <img src={this.head(props.user.head)} />
            <span>{props.user.displayName}</span>
          </div>
        )
      },
    }
    return (
      // <el-input
      //   autocomplete="off"
      //   class='task-allot-reason-input'
      //   placeholder={`${this.reallotRemarkNotNull ? '[必填]' : '[选填]'} 转派说明`}
      //   type='text'
      //   value={this.reason}
      //   onInput={(value: string) => this.reasonChangedHandler(value)}
      // />
      
      <biz-at-textarea 
        class="biz-at-textarea attextarea" 
        ref="atTextarea" 
        search-url="/message/user/lists" 
        name-key="displayName" 
        value={this.reason} 
        onSetUsers={(users: []) =>this.atUsersChangedHandler(users)}
        scopedSlots={scopedSlots}
        direction="bottom"
        >
          <el-input
            autocomplete="off"
            class='task-allot-reason-input'
            type='textarea'
            resize="none"
            value={this.reason}
            placeholder={t('task.tip.taskAllotModalTip12',)}
            autosize={{ minRows: 1, maxRows: 2 }}
            onInput={(value: any) =>this.reasonChangedHandler(value)}
        />
       </biz-at-textarea>
    )
  }


  public renderTaskAllotExecutorHeaderRow(label: string, node: VNode | null, style: string): VNode {
    return (
      <div class='task-allot-executor-header-row' style={style}>
        <span class='task-allot-executor-header-row-label'>
          { (this.reallotRemarkNotNull && label !== TaskVNodeTypeEnum.Synergies) ? <span class="task-cef">*</span> : null }
          {label}
        </span>
        {node}
      </div>
    )
  }
  
  /** 
   * @description 渲染工单派单头部派单选择
  */
  public renderTaskAllotExecutorHeader(): VNode {
    return (
      <div>
        <div class='task-allot-executor-header'>
          {/* { this.isAllotByTag && this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.ServiceDepartment, this.renderTeamSelect()) }
          { this.isAllotByTag && this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.Executor, this.renderTeamUserSelect()) }
          { !this.isAllotByTag && this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.Executor, this.renderDepartmentUserSelect(true)) } */}
          { this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.Executor, this.renderExecutorSelect()) }
          { this.isShowSynergy && this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.Synergies, this.renderSynergySelect()) }
          { !this.isOpenServiceItemsGray && this.renderPropagandaPageButton() }
        </div>
        { this.isCalendarMode && (
          <div class='task-allot-executor-header'>
            { this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.PlanStartTime, this.renderStartTimeSelect()) }
            { this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.PlanEndTime, this.renderEndTimeSelect()) }
          </div>
        )}
      </div>
    )
  }

  /**
   * @des 渲染负责人选择组件
   */

  public renderExecutorSelect(): VNode{
    return (
      <form-user
        class="executorSelect"
        field={{displayName:t('task.executor')}}
        value={this.executorSelectUserList}
        placeholder={t('common.placeholder.selectSomething', {0: t('task.executor')})}
        onInput={(val: any) => this.upDateExecutor(val)}
        canDelete={true}
        selectOptions={this.excutorSelectOptions}
        selectFn={this.excutorSelectFn}
       />
    )
  }
  /**
   * @description 渲染工单日历派单开始时间
  */
  public renderStartTimeSelect(): VNode {
    let defaultTime = getPlanStartTime(safeNewDate(), 'task').split(' ')[1]
    return (
      <div class="task-allot-calendar-select">
        <el-date-picker
          value={this.calendarStartTime}
          prefix-icon="iconfont icon-fdn-date"
          type="datetime"
          value-format="timestamp"
          format="yyyy-MM-dd HH:mm"
          placeholder={t('common.placeholder.selectSomething', {0: t('common.base.date')})}
          disabled={!this.allowEditTask}
          default-time={ defaultTime }
          picker-options={this.planTimeDatePickeroptions}
          onInput={(value: string) => this.handlerStartTimeInput(value)}
          /*onBlur={this.fetchCalendarData.bind(this)}*/
          onChange={(value: string) => this.handlerStartTimeChange(value)}
        >
        </el-date-picker>
      </div>
    )
  }

  /**
   * @description 渲染工单日历派单结束时间
  */
  public renderEndTimeSelect(): VNode {
    const planEndField = { 
      displayName: t('common.form.type.planEndTime'),
      formType:'planEndTime',
      setting: { dateType: 'dateTime' },
      ...(!this.allowEditTask && { disabled:true } )
    };
    return (
      <div class="task-allot-calendar-select">
         <form-planendtime 
            picker-options={ this.planTimeDatePickeroptions } 
            start-time={ this.calendarStartTime }
            field={ planEndField }
            value={this.calendarEndTime}
            onInput={(value: string) => this.handlerEndTimeInput(value)}
            >
         </form-planendtime>
      </div>
    )
  }

  /**
   * @description 渲染工单派单转派原因行
  */
  public renderTaskAllotReasonRow(): VNode | null {
    if (!this.isReAllot) return null
    
    return (
      <div class='task-allot-reason-row task-allot-executor-header'>
        <div class="task-flex task-ai task-mr12">   
          {
            this.notNull ? <span class="task-cef">*</span> : null
          }
          {t('task.list.displayName.transferReason')}： 
          <el-select style='width:240px;' value={this.customReason} placeholder={t('task.tip.taskAllotModalTip13', {data: this.notNull ? t('common.base.isRequire') : t('common.base.optional')})} onChange={(v: string) => this.customReasonChangedHandler(v)}>
            {
              this.backList && this.backList.map(item => {
                return (
                  <el-option
                    key={item}
                    label={item}
                    value={item}
                  />
                )
              })
            }
          </el-select>
          {
            this.systemAdmin ? <div class="task-font12 task-c13 task-ml12 task-pointer" onClick={() => {window.location.href = `${resourcePrefix}/setting/task/taskSet`}}>
               <el-tooltip class="item" effect="dark" content={t('task.goSetReason')} placement="top">
                <span class="iconfont icon-xitongguanli" style="color:#6c6c6d;"></span>
              </el-tooltip>
            </div> : null
          }</div>
        { this.renderTaskAllotExecutorHeaderRow(TaskVNodeTypeEnum.AllotReason, this.renderTaskAllotReason(), 'display: flex;flex: 1 0 auto;min-height: 32px;') }
      </div>
    )
  }
  
  /** 
   * @description 渲染工单派单头部派单选择
  */
  public renderTaskAllotExecutorBackgroundChunk() {
    return (
      <div class='task-allot-executor-chunk'></div>
    )
  }

  public showFilter = true
  
  /** 
   * @description 渲染工单指派人员表格头部
  */
  public renderTaskAllotUserTableHeader(): VNode {
    return (
      <div>
        <div class='task-allot-user-table-header'>
          { this.renderTaskAllotUserTableHeaderLabels() }
          { this.renderTaskAllotUserTableHeaderSelectBlock() }
        </div>
        <div class="mar-b-16 mar-l-16 mar-r-16" v-show={this.showFilter}>
          {  this.renderTaskAllotUserTableHeaderFilter() }
        </div>
      </div>
      
    )
  }
  
  /**
   * @description 渲染工单指派人员表格头部 标签列表
  */
  public renderTaskAllotUserTableHeaderLabels(): VNode {
    if (this.isMapMode) {
      // 是否存在工单地址
      const isHaveTaskAddress: boolean = Boolean(this.taskAddress?.latitude && this.taskAddress?.longitude)
      return (
        <div class='task-allot-user-table-header-label'>
          { !isHaveTaskAddress && (
            <div class='task-allot-no-address'>
              <i class='iconfont icon-fdn-info'></i>
              {t('task.tip.taskAllotModalTip14')}
            </div>
          ) }
        </div>
      )
    }
    
    if (this.isCalendarMode) {
      const className = ['iconfont',this.clashTips == t('task.tip.taskAllotModalTip7') ? 'icon-yitongguo' : 'icon-warning-circle-fill'];
      return (
        <div class='task-allot-user-table-header-label'>
          {/*{ this.clashTips &&(
            <div class='task-allot-no-address'>
              <i class={className}></i>
              { this.clashTips }
            </div>
          ) }*/}
          {/* { this.clashTips != '当前无人员有日程冲突' && (
            <div class='task-allot-no-address'>
              <i class='iconfont icon-warning-circle-fill'></i>
                { this.clashTips }
            </div>
          )
          } */}
          { this.renderTaskAllotCalendarTableHeader() }
          {<p class="task-calendar-tip-desc">{t('task.components.taskAllotModal.clickAvatarToSet')}</p>}
        </div>
      )
    }
    return (
      <div class='task-allot-user-table-header-label'>
        {
          this.tableSortLabelOptionss.map((sortLabel: ElSelectOption) => {
            const classNames = [
              'task-allot-user-table-sort-label',
              this.selectSortord === sortLabel.value ? 'task-allot-user-table-sort-label-active' : ''
            ]
            return (
              <el-tooltip content={ TaskAllotLabelTooltipMap[sortLabel.value] } placement='top'>
                <div class={classNames} onClick={() => this.handlerSortLabelChange(sortLabel.value as AllotSortedEnum, sortLabel.label)}>
                  { sortLabel.label }
                </div>
              </el-tooltip>
            )
          })
        }
        {/* {
          isQualification() ? '' : this.isShowServiceProviderType && 
          <el-popover
          placement="bottom"
          width="500"
          popper-class="el-popover-box"
          trigger="click"
        >
          <div>
            {
              this.qualificationsList.map(item => {
                const ischecked = this.selectQualifications.includes(item.value)
                return <el-button type={ischecked ? 'primary' : ''}
                  onClick={() => this.qualificationsChangeHandler(item.value)}>{item.label}</el-button>
              })
            }
          </div>
          <div
            onClick={() => this.handleSelectQualifications()}
            class={
              [
                'task-allot-user-table-sort-label',
                this.isSelectQualifications ? 'task-allot-user-table-sort-label-active' : ''
              ]
            }
            slot="reference"
          >
            {t('task.components.taskAllotModal.byAuthorizedQualification')}
          </div>
        </el-popover>

        } */}

      </div>
    )
  }

  /**
   * @description 渲染工单日历指派人员表格头部的提示
   */
  public renderTaskAllotCalendarTableHeader() {
    if(!this.isCalendarMode) return null;
    return (
        <div class="task-calendar-type-desc">
          <div class="plane-type"></div>
          <div class="plane-content time-text">{t('common.form.type.planTime')}</div>
          <div class="busy-type"></div>
          <div class="plane-content time-text">{t('task.detail.components.busyTime')}</div>
          <div class="config-type"></div>
          <div class="time-text">{t('task.detail.components.conflictTime')}</div>
        </div>
    )
  }

  
  public renderTaskAllotUserTableHeaderAll(){
    return (
      <div class="flex-x al-center">
        <el-checkbox style="margin-right:8px;" v-model={this.allowQualificationManagement} label={this.$t('qualificationManagement.view.label10')} onChange={(e)=>{this.allowQualificationManagement = e;this.initialize()}} />
        <div class="cur-point mar-r-12 flex-x" onClick={()=>{
          this.showFilter = !this.showFilter
        }}>{this.showFilter ? this.$t('qualificationManagement.view.label17') : this.$t('qualificationManagement.view.label16')}<div class={[this.showFilter ? 'rotatez-180' : '', 'mar-l-8']} style="height:15px;line-height:1;"><i class="iconfont icon-gongsimingchengxiala" style="font-size:12px;"></i></div></div>
      </div>
    )
  }

  public qualificationsList = []
  public renderTaskAllotUserTableHeaderQualificationManagement(){
    return (
      <QualificationManagementField style="min-width:150px;width:100%" value={this.qualificationsList} needLabel={false} onInput={(e)=>this.handlerQualificationsListChange(e)} />
    )
  }

  public renderTaskAllotUserTableHeaderFilter(){
    return (
      <div class='flex-x al-center flex-wrap'>
        { this.renderTaskAllotUserTableHeaderLabelSelect() }
        { this.renderTaskAllotUserTableHeaderStaffTagSelect() }
        { this.renderTaskAllotUserTableHeaderStateSelect() }
        { this.renderTaskAllotUserTableHeaderLocationSelect() }
        { this.renderTaskAllotUserTableHeaderQualificationManagement() }
      </div>
    )
  }
  
  /** 
   * @description 渲染工单指派人员表格头部 select选择
  */
  public renderTaskAllotUserTableHeaderSelectBlock() {
    return (
      <div class='task-allot-user-table-header-select-block'>
        { this.renderTaskAllotUserTableHeaderAll() }
        { this.renderSelectColumn() }
        { this.renderTaskAllotUserTableHeaderConflictSelect() }
      </div>
    )
  }

  /** 
   * @description 渲染工单指派人员表格头部 标签select选择
  */
  public renderTaskAllotUserTableHeaderConflictSelect() {
    if (!this.isCalendarMode) return null

    return (
      <el-select
        placeholder={t('task.components.taskAllotModal.conflictType')}
        // multiple
        value={this.selectConflict}
        onInput={(value: AllotConflictEnum) => this.handlerConflictChange(value)}
      >
        {
          this.conflictOptions.map((conflictOption: ElSelectOption) => {
            return (
              <el-option key={conflictOption.value} value={conflictOption.value} label={conflictOption.label} />
            )
          })
        }
      </el-select>
    )
  }

  /** 
   * @description 渲染工单指派人员表格头部 标签select选择
  */
  public renderTaskAllotUserTableHeaderLabelSelect() {
    let arr = this.labelOptions;
    if (this.isCalendarMode) {
      const length = arr.length;
      const index = arr.findIndex(item => item.value === AllotLabelEnum.DistanceSort);
      arr = [...arr.slice(0, index), ...arr.slice(index + 1, length)];
    }

    return (
      <el-select
        class="mar-r-12 w-100-p"
        placeholder={t('task.components.taskAllotModal.staffPicks')}
        value={this.selectLabel}
        onInput={(value: AllotLabelEnum) => this.handlerLabelChange(value)}
      >
        {
          arr.map((labelOption: ElSelectOption) => {
            return (
              <el-option key={labelOption.value} value={labelOption.value} label={labelOption.label} />
            )
          })
        }
      </el-select>
    )
  }
  
  /**
   * @description 渲染工单指派人员表格头部 位置select选择
   */
  public renderTaskAllotUserTableHeaderLocationSelect() {
    if (this.isCalendarMode) return null
    return (
      <el-select
        className='task-allot-user-table-location-select'
        class="mar-r-12 w-100-p"
        placeholder={t('common.placeholder.selectSomething', {0: t('task.components.taskAllotModal.distance')})}
        ref='TaskAllotTableLocaionSelect'
        value={this.selectLocation}
        onInput={(value: number) => this.handlerLocationChange(value)}
      >
        {
          this.locationOptions.map((locationOption: ElSelectOption) => {
            let isOtherOption = locationOption.label == t('common.base.other')
            return (
              <el-option
                class={isOtherOption && 'task-allot-user-table-location-select-other'}
                key={locationOption.value}
                value={locationOption.value}
                label={locationOption.label}
                disabled={isOtherOption}
              >
                {
                  isOtherOption
                    ? this.renderLocationOtherOption()
                    : null
                }
              </el-option>
            )
          })
        }
      </el-select>
    )
  }
  
  /**
   * @description 渲染选择位置 其他选项
  */
  public renderLocationOtherOption() {
    const HandlerMinValueChanged = (value: string) => { this.locationOtherData.minValue = this.handlerNumberFormat(value) }
    const HandlerMaxValueChanged = (value: string) => { this.locationOtherData.maxValue = this.handlerNumberFormat(value) }
    
    return (
      <div>
        <span>{t('common.base.other')}</span>
        <div>
          <el-input
            autocomplete="off"
            class='location-min-input'
            placeholder={t('common.base.minValue')}
            min={0}
            max={99999}
            type='number'
            value={this.locationOtherData.minValue}
            onInput={HandlerMinValueChanged}
          />
          —
          <el-input
            autocomplete="off"
            class='location-max-input'
            placeholder={t('common.base.maxValue')}
            type='number'
            min={0}
            max={99999}
            value={this.locationOtherData.maxValue}
            onInput={HandlerMaxValueChanged}
          />
          km
          <el-button type='primary' class='location-confirm-button' onClick={() => this.handlerLocationOtherChange()}>{t('common.base.makeSure')}</el-button>
        </div>
      </div>
    )
  }

  /**
   * @description 渲染工单指派人员表格头部 员工标签select选择
   */
  public renderTaskAllotUserTableHeaderStaffTagSelect() {
    return (
      <el-select
        class='task-allot-user-table-staff-tag-select mar-r-12 w-100-p'
        collapse-tags
        multiple
        filterable
        placeholder={t('task.components.taskAllotModal.staffTag')}
        value={this.selectStaffTag}
        onInput={(value: string[]) => this.handlerStaffTagChange(value)}
      >
        {
          this.staffTagList.map((tag: Tag) => {
            return (
              <el-option key={tag.id} value={tag.id} label={tag.tagName}>
                {tag.tagName}
              </el-option>
            )
          })
        }
      </el-select>
    )
  }
  
  /**
   * @description 渲染工单指派人员表格头部 工作状态select选择
   */
  public renderTaskAllotUserTableHeaderStateSelect() {
    return (
      <el-select
        class='task-allot-user-table-state-select mar-r-12 w-100-p'
        collapse-tags
        multiple
        placeholder={t('task.components.displayName.workState')}
        value={this.selectUserState}
        onInput={(value: string[]) => this.handlerUserStateChange(value)}
      >
        {
          this.userStateList.map((userState: UserState) => {
            return (
              <el-option key={userState.key} value={userState.value} label={this.getUserWorkStateLabel(userState.label)}>
                <div class='task-allot-state-select-item'>
                  <span class='user-state-round' style={{ backgroundColor: this.stateColorMap && this.stateColorMap[userState.label || ''] }}>
                  </span>
                  <span>{this.getUserWorkStateLabel(userState.label)}</span>
                </div>
              </el-option>
            )
          })
        }
      </el-select>
    )
  }

  /** 
   * @description 获取用户工作状态的多语言label
  */
  public getUserWorkStateLabel(label) {
    return UserWorkStateLabelEnum[label] || label
  }
  
  /** 
   * @description 渲染选择列
  */
  public renderSelectColumn() {
    if (this.isMapMode || this.isCalendarMode) return null
    
    // return (
    //   <UiInput>
    //     <div class='task-allot-user-table-column' onClick={() => this.showAdvancedSetting()}>
    //       <span>{t('common.base.choiceCol')}</span>
    //     </div>
    //   </UiInput>
    // )
    return (
      <div class="cur-point" onClick={()=>{
        this.showAdvancedSetting()
      }}>{this.$t('common.base.choiceCol')}<i class="iconfont icon-more mar-l-8" style="font-size:12px;"></i></div>
    )
  }
}

export default TaskAllotExecutorRender
